<!--
 * @Description: 权限提示组件
-->
<template>
  <el-dialog v-model="visible" title="权限提示" width="400px" @close="handleClose">
    <div class="power-content">
      <el-icon class="info-icon">
        <InfoFilled />
      </el-icon>
      <p>{{ tipsMsg || '您暂无相关权限，请联系管理员。' }}</p>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">知道了</el-button>
      <el-button type="primary" @click="handleContact">联系客服</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDialog, ElButton, ElIcon } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

interface Props {
  tipsMsg: boolean | string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  onClose: []
  onContact: []
}>()

const visible = computed({
  get: () => !!props.tipsMsg,
  set: (value) => {
    if (!value) {
      emit('onClose')
    }
  }
})

const handleClose = () => {
  emit('onClose')
}

const handleContact = () => {
  emit('onContact')
  emit('onClose')
}
</script>

<style scoped lang="less">
.power-content {
  text-align: center;
  padding: 20px 0;
  
  .info-icon {
    font-size: 48px;
    color: #409eff;
    margin-bottom: 16px;
  }
  
  p {
    margin: 0;
    color: #666;
    line-height: 1.6;
  }
}
</style>
